<template>
  <BaseWrap>
    <div class="t-one-calc">
      <div class=" top">
        <el-input
          v-model="queryInput"
          class="input-with-select"
          clearable
          placeholder="请输入需要查询的料件"
        >
          <el-button slot="append" icon="el-icon-search" @click="query"></el-button>
        </el-input>
      </div>
      <div v-loading="isRequesting" class="bottom">
        <CalcDetailTable :childLength="childLength" :tableData="tableData"></CalcDetailTable>
      </div>
    </div>
  </BaseWrap>
</template>

<script>
import CalcDetailTable from './components/CalcDetailTable'
import { fullBomComputed } from '@/api/quote/full-bom'
export default {
  name: 'ToneCalc',
  components: { CalcDetailTable },
  data() {
    return {
      queryInput: '',
      tableData: [],
      isRequesting: false
    }
  },
  computed: {
    childLength() {
      const arr = []
      this.tableData.forEach(item => {
        if (item.supplierInfo && item.supplierInfo.length) {
          arr.push(item.supplierInfo.length)
        }
      })
      return arr.length > 0 ? Math.max(...arr) : 0
    }
  },
  methods: {
    async query() {
      try {
        this.isRequesting = true
        const { data: res } = await fullBomComputed({
          pn: this.queryInput
        })
        this.tableData = [res.bodyInfo.bodySupplierInfo, res.bodyInfo.bodyPn, ...res.underPn]
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    }
  }
}
</script>

<style lang="scss">
.t-one-calc {
  height: 100%;
  .top {
    display: flex;
    .input-with-select {
      width: 300px;
      justify-content: flex-start;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
  }
  .bottom {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0px;
  }
}
</style>
